/**
 * diff 更新原理:
 * 1.
 *
 */

function diff(newFiberNode, oldFiberNode) {
  nodeDiff(newFiberNode, oldFiberNode);
}

function nodeDiff(newNode, oldNode) {}

/**
 * 原理：
 * 1. 首先判断最新的dom，如果是单个走单个diff，多个就走多个diff
 *
 * 2. 单个 reconcilerSingleElement， 先判断 key， 在判断 type， 如果，key相同，type不同，那么剩下的同级别的fiber一定不同，择删除， deleteRemeningChild，
 *    如果，key不同，type不同，则给当前的dom， 打上 删除的标签
 *
 *
 * 3. 多个 节点 情况：
 * a. 节点更新（包括props，textContext 更新：
 * b. 节点增多或者减少：
 * c. 节点位置变化：
 *
 * 按照逻辑： 可以进行a、b、c的逻辑，但是，react团队发现，日常开发中，a更新的操作会多一点，所以，先判断，是否是更新，
 * 因为children 是数组，其实可以通过双端比较，前后两个指针，但是，和children 对比的是current fiber，其是 silbing 链接的单向链表，所以，无法进行双端遍历，就不可以这样
 * 然后，就需要进行两次遍历，第一次，处理需要更新的dom，第二次，处理不需要更新的dom
 *
 *
 * 第一遍遍历：
 * 1. i， 比较newChildren[i] 和 oldFiber ， 如果可以服用， 就i++，继续比较 newChidren[i] 和 olfFibre.silbing
 *
 * 2. 不可复用的情况
 * a. key 不同，则直接跳出循环，第一次循环结束
 * b. key 相同， type 不同， 则打上  DELETE 标签，继续遍历
 *
 * 3. 如果，i===newCHildren.length-1, 或者， oldFibre.silbing===null, 则第一次循环结束
 *
 *
 * 第二遍遍历：
 * a. 步骤a跳出的循环， newCHIld和 oldFiler都没有遍历完
 *
 * b. newChild 或者 oldFiber 或者 两者都遍历完了
 *
 * 如果是b的情况，那么，第一次遍历结束就进行 `更新` 了， 此时， diff 结束
 * 如果是a 的情况， 那么，
 * i： oldFiber 遍历完了， 那么，所有的已有 DOM 都复用完了，那么，我们只需要遍历 newChildren，为剩下的新增DOM ，打上 placement 标签
 * ii： newCHildren 遍历完了， oldFiber 没有遍历完， 那么就证明，剩下的DOM需要删除，那么，打上 deletaion 标签
 * iii： newchildren oldFiber 都没有遍历完， 那么， 就是证明，其中有了 移动的 节点
 *
 *  iiii: 有移动的情况，就是，将oldFIber，放进kv的map中， key 作为key， oldfiber 作为value， 那么，在找到 newChild[i].key 就可以找到 oldfiber，
 *          那样，就可以比较是否移动
 *         注： 是否移动的判断条件，就是，定义一个参照物，就是， 最后一个被复用节点的位置， 然后，之后的话，只能判断， 该节点在参照物的左边，还是右边
 *              如果是左边，那就没动， 如果是右边，那就动了
 *       注意： 尽量减少，将元素从后面移动到前面的操作
 *
 *
 */
